<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表单绑定</title>
    <!-- <script src="https://unpkg.com/vue@3.5.21/dist/vue.global.js"></script> -->
    <script src="../assets/vue3.js"></script>

    <style>

    </style>
</head>

<body>
    <div id="app">
        <p>原数据：{{msg}}</p>
        <p>新数据：{{reversedMsg}}</p>
        <input type="text" v-model="msg">

        <hr>
        商品的价格是 <input type="text" v-model="price"> <br>
        折扣价: {{disPrice}}


        <hr>
        <h3>患者列表</h3>
        <div>

            <ul>
                <li v-for="u in users ">{{u}}</li>
            </ul>

        </div>

        <hr>
        <h3>男性患者列表</h3>
        <div>
            <ul>
                <li v-for="u in maleUsers ">{{u}}</li>
            </ul>

        </div>
        <h3>女性患者列表</h3>
        <div>

            <ul>
                <li v-for="u in femaleUsers ">{{u}}</li>
            </ul>

        </div>


    </div>



    <script>


        let app = Vue.createApp({
            // 为了让页面绑定的数据  
            data() {
                return {
                    msg: 'hello world ',
                    price: 100,
                    users: [
                        { name: '张三', age: 18, gender: '男' },
                        { name: '李四', age: 18, gender: '女' },
                        { name: '赵六', age: 18, gender: '男' },
                        { name: '孙尚香', age: 18, gender: '女' },
                        { name: '孙悟空', age: 18, gender: '男' },

                    ]
                }
            },
            // methods:{}

            //计算属性 computed 
            computed: {
                reversedMsg() {
                    return this.msg.split('').reverse().join("")
                },
                disPrice() {
                    return this.price * 0.9
                },
                maleUsers() {
                     return  this.users.filter(  user => user.gender == '男'     )
                },
                femaleUsers() {
                    return  this.users.filter(  user => user.gender == '女'     )

                }
            }


            //观察器 watch

        }).mount("#app")
    </script>
</body>

</html>